<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
html, body, .wrapper {
	width: 100%;
	height: 100%;
}

dl>dd {
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

.wrapper {
	
}
.content-search{
  padding-right: 20px;
}
.top-search {
	padding-top: 10px;
	height: 20px;
}

.top-search div {
	float: left;
	vertical-align: middle;
}

.top-search div:nth-child(1) {
	margin-right: 20px;
}

.top-search div:nth-child(2) button {
	margin-left: 10px;
}

.list-top {
	text-align: left;
	line-height: 30px;
	font-weight: bold;
}

.list-top span {
	margin-left: 4px;
	display: inline-block;
}

.list-top, .list-bottom {
	height: 30px;
	background: #eee;
}

.list-center {
	height: 55px;
	padding: 10px 0px 0px 5px;
	font-size: 15px;
}

.list-bottom button {
	margin-left: 10px;
	margin-top: 2px;
}

.btn {
	padding: 4px 6px;
	line-height: 16px;
}

.span_title{
	display:inline-block;
	padding:5px 0px;
	width:75px;
}
.span_content{
	display:inline-block;
	padding:5px 0px;
	width:135px;
}
.right{
/* text-align: right */
	width:75px;
}
.textHide{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}
.layui-layer-tips .layui-layer-content{
	word-break:break-all;
	word-wrap:break-word
}
</style>
</head>
<body>
	<div class='wrapper'>
		<div class="top-search">
			<!-- <div>
				<span>搜索条件</span> <input type="text">
			</div> -->
			<div>
				<!-- <button type="button" class="btn btn-danger radius">查询</button> -->
				<button type="button" id="addCustomer" class="btn btn-danger radius">新增用户</button>
			</div>
		</div>
		<div class="content-search">
			<c:set var="nowDate" value="<%=System.currentTimeMillis()%>" ></c:set>  
			<dl>
				<!-- 循环dd标签 -->
				<c:forEach items="${requestScope.customerList }" var="t">
					<dd data-id="${pageScope.t.id }" style="margin-left: 0;" >
						<div class='list-top'>
							<span> 
								<c:choose>
									<c:when test="${pageScope.t.customerRoomMap.cusIndentity eq 0 }">
										产权人：
									</c:when>
									<c:otherwise>
										租赁人：
									</c:otherwise>
								</c:choose>
							</span> 
							<!-- 法人显示公司名称 -->
							<c:if test="${pageScope.t.customerType==1}">
								<span>${pageScope.t.company.companyName}</span>
							</c:if>
							<!-- 自然人显示客户名称 -->
							<c:if test="${pageScope.t.customerType==2}">
								<span>${pageScope.t.name }</span>
							</c:if>
							<c:set var="endLease" value="${pageScope.t.customerRoomMap.endLease.time}" ></c:set>
							<c:set var="shareProject" value="${pageScope.t.shareProjectid}" ></c:set>
							<c:set var="cusIndentity" value="${pageScope.t.customerRoomMap.cusIndentity}" ></c:set>
							<!-- 公共产权人不显示过期时间 -->
							<c:if test="${empty shareProject && not empty endLease && cusIndentity=='1' && (endLease-nowDate)<5184000000 && (endLease-nowDate)>0}">
								<span style="float:right;margin-right:5px;color:red"><fmt:formatNumber type="number" value="${(endLease-nowDate)/86400000}" maxFractionDigits="0"/> 天即将过期</span>
							</c:if>
							<c:if test="${empty shareProject && cusIndentity=='1' && not empty endLease && (endLease-nowDate)<0 }">
								<span style="float:right;margin-right:5px;color:red">已过期<fmt:formatNumber type="number" value="${(nowDate-endLease)/86400000}" maxFractionDigits="0"/> 天</span>
							</c:if>
						</div>
						<div class='list-center'>
							<div>
								<table style="width: 100%;table-layout:fixed;">
									<tr>
										<td class="right">客户类型：</td>
										<td style="width:100px;" class="customerType">
											<c:if test="${pageScope.t.customerType==1}">法人</c:if>
											<c:if test="${pageScope.t.customerType==2}">自然人</c:if>
										</td>
										<c:if test="${pageScope.t.customerType==1}">
											<td class="right">单位名称：</td>
											<td style="width:150px;" class="textHide"><span class="toolTip" data-tip="${pageScope.t.company.companyName}">${pageScope.t.company.companyName}</span></td>
											<td class="right">企业性质：</td>
											<td class="textHide toolTip">${pageScope.t.company.companyNature}</td>
										</c:if>
										<c:if test="${pageScope.t.customerType==2}">
											<td class="right"></td>
											<td style="width:150px;"></td>
											<td class="right"></td>
											<td style="width:100px;"></td>
											<td class="right"></td>
											<td></td>
										</c:if>
									</tr>
									<tr>
										<c:choose>
											<c:when test="${pageScope.t.customerType==1}">
												<td>法人代表：</td>
											</c:when>
											<c:when test="${pageScope.t.customerType==2}">
												<td>姓名：</td>
											</c:when>
										</c:choose>
										<td>${pageScope.t.name }</td>
										<td>手机号：</td>
										<td>${pageScope.t.telMobile}</td>
										<td>固定电话：</td>
										<td>${pageScope.t.tel}</td>
										<td class="right">首次租期：</td>
										<td class="textHide"><fmt:formatDate value="${pageScope.t.customerRoomMap.staLease}" pattern="yyyy-MM-dd" /></td>
										<td class="right">续租终止：</td>
										<td class="textHide"><fmt:formatDate value="${pageScope.t.customerRoomMap.endLease}" pattern="yyyy-MM-dd" /></td>
									</tr>
								</table>
							</div>
						</div>
						<div class='list-bottom'>
							<button type="button" class="btn btn-danger radius customerEdit">详情</button>
							<button type="button" class="btn btn-danger radius customerShift">转换</button>
							<!-- <button type="button" class="btn btn-danger radius customerMove">移动</button> -->
							<c:if test="${cusIndentity=='1'}"><!-- 租赁人 -->
								<button type="button" class="btn btn-danger radius zleave">迁出</button>
							</c:if>
							<c:if test="${cusIndentity=='0'}"><!-- 产权人 -->
								<button type="button" class="btn btn-danger radius leave">迁出</button>
							</c:if>
							<c:if test="${cusIndentity=='0'}">
								<button type="button" class="btn btn-danger radius extLease">复制</button>
							</c:if>
							<%-- <c:if test="${cusIndentity=='1'}">
								<button type="button" class="btn btn-danger radius extLease">合并</button><!-- 扩租 -->
							</c:if>
							<c:if test="${pageScope.t.customerRoomMap.status==1}">
								<button type="button" class="btn btn-danger radius outLease">拆分</button><!-- 退租 -->
							</c:if> --%>
							<!-- 非产权人才会有房间变更记录 -->
							<%-- <c:if test="${pageScope.t.customerIdentity==1 }">
								<button type="button" class="btn btn-danger radius roomHistory">房间记录</button>
							</c:if> --%>
				    	</div>
					</dd>
				</c:forEach>

				<!-- 预留的模版dd 方便以后修改
				<dd>
					<div class='list-top'>
						<span>产权人:</span><span>于春辉</span>
					</div>
					<div class='list-center'></div>
					<div class='list-bottom'>
						<button class="btn btn-danger radius">查看</button>
						<button class="btn btn-danger radius">编辑</button>
						<button class="btn btn-danger radius">迁出</button>
						<button class="btn btn-danger radius">变更</button>
					</div>
				</dd> -->
			</dl>
		</div>
	</div>
	<script type="text/javascript">
	
		$(function(){
			//控制新增用户按钮，如果是自用状态将没有按钮
			if(parent.status!=2){
				//不是自用状态就给按钮个点击事件
				$("#addCustomer").click(openCustomerDetail);
			}else{
				$("div.top-search").remove();
			}
			//编辑按钮事件
			$("button.customerEdit").click(openCustomerDetail);
			//迁出按钮事件
			$("button.leave").click(toLeave);
			//租赁人迁出按钮事件
			$("button.zleave").click(toLeave2);
			//客户类型转换，自然人到法人 或 法人到自然人
			$("button.customerShift").click(runCustomerShift);
			//客户房间移动事件，将客户移动到其他房间
			//$("button.customerMove").click(runCustomerMove);
			//查看该客户入住后房间变动信息
			$("button.roomHistory").click(roomHistory);
			//扩租 
			$("button.extLease").click(extLease);
			//退租
			$("button.outLease").click(outLease);
			//关闭父页面加载层
			parent.layer.close(parent.lyLoadIndex);
			//提示框
			toolTip();
			addRoomListTp();
		});
		
		//扩租方法产权人复制,点击打开房间列表，选择房间进行复制产权人
		function extLease(){//parent.fkbuildId   楼号id
			var cusIndentity = '0';
			var cid=$(this).parent().parent().attr("data-id");
			var floorId = "null";//parent.buildFloorId;
			 top.layer.open({
				type : 2,
				title : '房间选择',
				shadeClose : false,
				shade : 0.1,
				maxmin : true, //开启最大化最小化按钮
				area : [ '90%', '80%' ],
				end:parent.updateRoomNotClick,//销毁回调,刷新当前页
				content : 'roomInfo/toRoomList/'+floorId+'/'+parent.roomId+'/'+cid+'/'+cusIndentity+"/"+parent.parent.projectID
			}); 
		}
		//将房间列表添加到移动模版中
		function addRoomListTp(){
			var sl=$("#moveTp div select");
			$.each(parent.roomList,function(i,v){
				sl.append("<option value=\""+v.id+"\" >"+v.roomNum+"</option>");
			});
		}
	 
		//房间状态
		//alert(parent.status);
		//房间id
		//alert(parent.roomId);
		//- 代表没有客户id,通过有无id来区分是点击的新增还是编辑客户按钮
		var customerId="-";
		
		//打开新增客户页面
		function openCustomerDetail() {
			var data_id=$(this).parent().parent().attr("data-id");
			//有值代表点击的是某个客户的编辑按钮，无值代表点击新增用户
			if(!(data_id==null)){
				customerId=data_id;
			}else{
				customerId="-";
			}
			top.layer.open({
				type : 2,
				title : '客户信息',
				shadeClose : false,
				shade : 0.1,
				maxmin : true, //开启最大化最小化按钮
				area : [ '90%', '80%' ],
				end:parent.updateRoom,//销毁回调,刷新当前页
				content : 'customerInfo/toCustomerDetail/' + parent.roomId + '/' + parent.status + '/' + customerId+'/'+top.projectID
			});
		}
		//迁出事件 该方法后台未完成   （ 目前只是修改了客户表的HistoryStatus状态值）
		var customer_id="-";//客户id变量,只做该方法和确定迁出方法的变量使用
		function toLeave(){
			customer_id=$(this).parent().parent().attr("data-id");
			layer.open({
		      type: 1,
		      title: '迁出',
		      shadeClose: false,
		      shade: [0.1,"#fff"],
		      maxmin: false, //开启最大化最小化按钮
		      offset:'15%',
		      area: ['360px', '200px'],
		      content: $("#dateTp").html()
		    });
		}
		function toLeave2(){
			customer_id=$(this).parent().parent().attr("data-id");
			layer.open({
		      type: 1,
		      title: '迁出',
		      shadeClose: false,
		      shade: [0.1,"#fff"],
		      maxmin: false, //开启最大化最小化按钮
		      offset:'15%',
		      area: ['360px', '200px'],
		      content: $("#dateTp3").html()
		    });
		}
		//退租
		function outLease(){
			customer_id=$(this).parent().parent().attr("data-id");
			layer.open({
		      type: 1,
		      title: '退租',
		      shadeClose: false,
		      shade: [0.1,"#fff"],
		      maxmin: false, //开启最大化最小化按钮
		      offset:'15%',
		      area: ['360px', '150px'],
		      content: $("#dateTp2").html()
		    });
		}
		
		//执行确定迁出
		function leaveRun(obj){
			//获取到迁出时间
			var v = $(obj).prevAll("table").find("#leaveDate").val();
			var isLeaveAll = $("input[name='isLeaveAll']:checked").val();
			var url = "";
			if(isLeaveAll == 0){//彻底迁出
				url = 'customerInfo/leaveCustomer';
			}else{//只迁出当前房间
				url = 'customerInfo/outLeaveCustomer';
			}
			$.post(url,{customerId:customer_id,roomId:parent.roomId,leaveTime:v},function(data,status){
				layer.close(layer.index);
				var msg;
				if(data.msg=="success"){
					msg="迁出成功";
				}else if(data.msg=="leaveError"){
					msg="该房间下还有出租人不能迁出";
				}else if(data.msg == "isExist"){
					msg="其他房间该产权人下还有出租人不能迁出";
				}
				layer.alert(msg,{
					shade: [0.1,"#fff"],
				},function(){
					parent.updateRoom();
				});
			},"json");
		}
		
		//执行确定迁出
		function outLeaveRun(obj){
			//获取到迁出时间
			var v = $(obj).prevAll("input").val();
			$.post("customerInfo/outLeaveCustomer",{customerId:customer_id,roomId:parent.roomId,leaveTime:v},function(data,status){
				layer.close(layer.index);
				var msg;
				if(data.msg=="success"){
					msg="退租成功";
				}else{
					msg="退租失败";
				}
				layer.alert(msg,{
					shade: [0.1,"#fff"],
				},function(){
					parent.updateRoom();
				});
			},"json");
		}
		
		//执行客户类型转换 法人to 自然人 或 自然人to法人
		function runCustomerShift(){
			var $dd= $(this).parent().parent();
			//客户id
			var cId= $dd.attr("data-id");
			//待转变的客户类型
			var customerType = $dd.find("td.customerType").text().trim();
			customerType=customerType=="自然人"?"法人":"自然人";
			
			var ext=customerType=="自然人"?"该操作会删除法人所在公司信息。":"";
			layer.confirm("确定将该客户转换成"+customerType+"么？"+ext, {
				offset:'20%',
				shade:[0.1,'#fff']
			}, function(){
			  	$.post("customerInfo/customerShift",{
			  		cId:cId,
			  		customerType:customerType
			  	},function(data){
			  		layer.alert(data.msg,{
			  			offset:'20%',
						shade:[0.1,'#fff']
			  		},function(){
						layer.closeAll();
			  			if(data.success){
			  				parent.updateRoom();
			  			}
			  		});
			  	});
			});
		}
		
		//客户房间移动  2018/2/26 弃用  过一段时间没问题将其删除
		/* function runCustomerMove(){
			var $dd= $(this).parent().parent();
			//客户id
			customer_id= $dd.attr("data-id");
			//楼层id
			layer.open({
			      type: 1,
			      title: '移动',
			      shadeClose: false,
			      shade: [0.1,"#fff"],
			      maxmin: false, //开启最大化最小化按钮
			      offset:'15%',
			      area: ['360px', '150px'],
			      end:parent.updateRoom,//销毁回调,刷新当前页
			      content: $("#moveTp").html()
		    });
		} */
		//查看该客户入住后所有历史房间
		function roomHistory(){
			var $dd= $(this).parent().parent();
			//客户id
			customer_id= $dd.attr("data-id");
			//alert(customer_id);
			//alert(parent.roomId);
			top.layer.open({
				type : 2,
				title : '客户信息',
				shadeClose : false,
				shade : 0.1,
				maxmin : true, //开启最大化最小化按钮
				area : [ '70%', '60%' ],
				end:parent.updateRoom,//销毁回调,刷新当前页
				content : 'roomInfo/toRoomMergeHistory/' + customer_id + '/' + parent.roomId
			});
		}
		
		//开始移动，将客户移动到指定房间下
		function runMove(_this){
			var index = top.layer.load(2);
			var roomId=$(_this).prevAll("select").val();
			$.post("customerInfo/runCustomerMove",{roomId:roomId,cId:customer_id},function(data){
				top.layer.close(index);
				if(data.success){
					layer.alert(data.msg,function(){
						parent.updateRoom();
					});
				}else{
					layer.alert("移动失败",function(){
						parent.updateRoom();
					});
				}
			});
		}
	</script>
	
	<!-- 迁出时间模版 -->
	<div id="dateTp" style="display: none;" >
		<div style="margin: 5px auto;width: 340px;text-align: center;" >
			<table cellpadding="10" cellspacing="5" class="mytable">
				<tr>
					<td align="right">迁出日期:</td>
					<td><input type="text" style="width: 170px;" name="leaveDate" id="leaveDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})"/> </td>
				</tr>
				<tr>
					<td align="right">清空所有产权人:</td>
					<td align="left">
						<input type="radio"value="0" name="isLeaveAll" >是
						<input type="radio" value="1" name="isLeaveAll" checked="checked">否
					</td>
				</tr>
			</table>
			<button class="btn btn-danger" onclick="leaveRun(this);" >确定迁出</button>
		</div>
	</div>
	<div id="dateTp3" style="display: none;" >
		<div style="margin: 5px auto;width: 340px;text-align: center;" >
			<table cellpadding="10" cellspacing="5" class="mytable">
				<tr>
					<td align="right">迁出日期:</td>
					<td><input type="text" style="width: 170px;" name="leaveDate" id="leaveDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})"/> </td>
				</tr>
			</table>
			<button class="btn btn-danger" onclick="leaveRun(this);" >确定迁出</button>
		</div>
	</div>
	<!-- 退租时间模版 -->
	<div id="dateTp2" style="display: none;" >
		<div style="margin: 5px auto;width: 340px;text-align: center;" >
			<span>迁出日期:</span>
			<input type="text" style="width: 170px;" name="leaveDate" id="leaveDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})"/> 
			<input type="radio"value="0" name="isLeaveAll" checked="checked" style="diplay:none;">是
			<br>
			<button class="btn btn-danger" onclick="outLeaveRun(this);" >确定退租</button>
		</div>
	</div>
	
	<!-- 客户移动模版 由于删除了客户移动功能 该模板暂时废弃  确定不用后期删除-->
	<div id="moveTp" style="display: none;" >
		<div style="margin: 5px auto;width: 340px;text-align: center;">
			<span>移动房间:</span>
			<select>
				<!-- <option value="102" >102</option> -->
			</select>
			<br>
			<button class="btn btn-danger" onclick="runMove(this);" >确定移动</button>
		</div>
	</div>
	
	
</body>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript" src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="js/form.js" ></script>
</html>